<template>
	<view class="application" :data-theme="theme" :theme="theme" :data-locale="locale" :locale="locale" :style="{ '--app-statusbar-height': statusBarHeight }">
		<view class="navbar" v-if="navbar == 'show'"><bro-navbar ref="navbar" :title="title" /></view>
		<view class="navbar" v-if="navbar == 'custom'"><slot name="navbar"></slot></view>

		<view
			v-if="!scroll"
			:class="{
				container: true,
				'hide-tabbar': tabbar == 'hide',
				'hide-navbar': navbar == 'hide',
				'fill-container': navbar == 'hide' && tabbar == 'hide'
			}"
		>
			<slot></slot>
		</view>
		<scroll-view v-if="scroll" :class="{ container: true, 'hide-tabbar': tabbar == 'hide' }" :scroll-with-animation="true" :scroll-y="true"><slot></slot></scroll-view>

		<view class="tabbar-container" v-if="tabbar == 'show'"><bro-tabbar ref="tabbar" :tabbar-list="tabbarList" @click-tabbar="clickTabbar" /></view>
		<view class="tabbar-container" v-if="tabbar == 'custom'"><slot name="tabbar"></slot></view>

		<bro-combobox ref="combobox" />
		<bro-error ref="error" />
		<bro-loading ref="loading" />
		<bro-msgbox ref="msgbox" />
		<bro-toast ref="toast" />
	</view>
</template>

<script>
import Vue from 'vue';
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';

import broStatusbar from '../statusbar/statusbar';
import broNavbar from '../navbar/navbar';
import broTabbar from '../tabbar/tabbar';

import broCombobox from '../combobox/combobox';
import broError from '../error/error';
import broLoading from '../loading/loading';
import broMsgbox from '../msgbox/msgbox';
import broToast from '../toast/toast';

export default {
	computed: {
		locale() {
			return this.$lan.locale;
		},
		theme() {
			return this.$theme.getters.currentName;
		}
	},
	data() {
		return {
			statusBarHeight: statusBarHeight
		};
	},
	components: {
		broStatusbar,
		broNavbar,
		broTabbar,

		broToast,
		broMsgbox,
		broCombobox,
		broLoading,
		broError
	},
	props: {
		title: { type: String },
		scroll: { type: Boolean, default: true },
		tabbar: { type: String, default: 'hide' }, //custom,show,hide
		navbar: { type: String, default: 'show' }, //custom,show,hide
		'tabbar-list': {
			type: Object,
			default() {
				return {
					list: []
				};
			}
		}
		// theme:{type:String},
	},
	activated() {
		this.updatePrototype();
	},
	mounted() {
		this.updatePrototype();
	},
	methods: {
		updatePrototype() {
			for (var key in this.$refs) {
				Vue.prototype['$' + key] = this.$refs[key];
			}
		},
		clickTabbar(item) {
			this.$emit('click-tabbar', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.application {
	color: var(--app-page-text-color);
	background-color: var(--app-page-bg-color);
	// font-family: "Kowruk Tom";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	$scren-height: 100vh;
	$navbar-height: 44px;
	$tabbar-height: 100rpx;

	$container-height: calc(#{$scren-height} - #{$navbar-height} - #{$tabbar-height} - var(--app-statusbar-height));
	$hide-navbar-container-height: calc(#{$scren-height} - #{$tabbar-height} - var(--app-statusbar-height));
	$hide-tabbar-container-height: calc(#{$scren-height} - #{$navbar-height});
	.navbar {
		height: $navbar-height;
		/* #ifdef APP-PLUS */
		padding-top: var(--app-statusbar-height);
		/* #endif */
	}
	.container {
		height: $container-height;
		width: 100%;
		background-color: var(--app-container-bg-color);
		color: var(--app-container-text-color);
	}
	.hide-navbar {
		height: $hide-navbar-container-height;
	}
	.hide-tabbar {
		height: $hide-tabbar-container-height;
	}
	.fill-container {
		height: $scren-height;
	}
	.tabbar-container {
		width: 100%;
		height: $tabbar-height;
	}
	// .panel-container{
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// }
	.hover {
		opacity: 0.6;
	}
}
</style>
